<template>
  <div class="mian">
    <div class="singer_tag">
      <div>
        <a href="#" class="btn_tag">热门</a>
        <a href="#">A</a>
        <a href="#">B</a>
        <a href="#">C</a>
        <a href="#">D</a>
      </div>
      <div>
        <a href="#" class="btn_tag">全部</a>
        <a href="#">内地</a>
        <a href="#">港台</a>
        <a href="#">欧美</a>
        <a href="#">日本</a>
        <a href="#">韩国</a>
      </div>
      <div>
        <a href="#" class="btn_tag">全部</a>
        <a href="#">男女</a>
        <a href="#">组合</a>
      </div>
      <div>
        <a href="#" class="btn_tag">全部</a>
        <a href="#">流行</a>
        <a href="#">说唱</a>
        <a href="#">国风</a>
        <a href="#">摇滚</a>
        <a href="#">电子</a>
      </div>
    </div>
    <div class="p_ns">
      <div class="p_ns--t">
        <span>全部歌单</span>
      </div>
      <div class="p_ns--rt">热门/推荐</div>
    </div>
    <div class="p_content">
      <div class="p-name">
        <dl v-for="plist in Playlists" :key="plist.id">
          <dt>
            <router-link :to="'/Detail/PlaylistDetail?pid='+plist.id">
              <img
                :src="getimg(plist.playlistImg)"
                alt="找不到图片"
                width="144"
                height="144"
              />
              </router-link>
          </dt>
          <dd class="c_title">
            <a href="#">{{ plist.playlistName }}</a>
          </dd>
          <dd>
            <a href="#">by:{{ plist.userNickname }}</a>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //数组接收res
      Playlists: [],
      getimg(src) {
        return require("../../assets/images/" + src);
      },
    };
  },
  //页面加载后自动调用
  mounted() {
    this.GetPlaylist();
  },
  methods: {
    //获取歌单列表
    GetPlaylist: function () {
      var thisvue = this;
      this.$http
        .get("http://localhost:31551/api/Playlist/GetPlaylist/")
        .then(function (res) {
          thisvue.Playlists = res.data;
        });
    },
  },
};
</script>

<style>
/*头部分类*/
.p_tag {
  width: 1075px;
  height: 150px;
  margin: auto;
  padding-top: 20px;
}

.p_tag li {
  float: left;
  width: 70px;
}
.p_tag div {
  float: left;
  margin-left: 23px;
  height: 150px;
  width: 150px;
  border-right: 1px solid #808080;
}
/*中间标题*/
.p_ns {
  width: 1050px;
  height: 50px;
  line-height: 50px;
  margin: auto;
}
.p_ns--t {
  float: left;
}
.p_ns--rt {
  float: right;
}
/*歌单内容*/
.p_content {
  height: 1100px;
}
.p-name {
  width: 1200px;
  height: 200px;
  margin: auto;
}
.p-name dl {
  float: left;
  margin: 20px 0 0 75px;
}
.c_title {
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>